<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="会议室状态统计" name="first">
        <div>
          <div id="state" :style="{width: '100%', height: '550px',backgroundColor:'#fff',marginTop:'30px'}" />
        </div>
      </el-tab-pane>

      <el-tab-pane label="会议室使用次数统计" name="second" style="overflow: hidden">
        <div class="block" style="float: right">
          <el-date-picker @change="handleFilterBar(3)" v-model="alarmdate" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <div id="totalUse" :style="{width: '100%', height: '550px',backgroundColor:'#fff',marginTop: '120px'}" />
      </el-tab-pane>

      <el-tab-pane label="会议室预约次数统计" name="third" style="overflow: hidden">
        <div class="block" style="float: right">
          <el-date-picker @change="handleFilterBar(1)" v-model="alarmdate" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <div id="totalYuyue" :style="{width: '100%', height: '550px',backgroundColor:'#fff',marginTop: '120px'}" />
      </el-tab-pane>

      <el-tab-pane label="会议室取消次数统计" name="fourth" style="overflow: hidden">
        <div class="block" style="float: right">
          <el-date-picker @change="handleFilterBar(2)" v-model="alarmdate" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <div id="total" :style="{width: '100%', height: '550px',backgroundColor:'#fff',marginTop: '120px'}" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style>
.button-margin {
  margin: 2px 0px;
}

.el-button+.el-button {
  margin-left: 1px;
}
</style>

<script>
import { getState, getStateBar } from "@/api/report.js";
import moment from "moment";
export default {
  name: "Report",
  data() {
    return {
      activeName: "first",
      alarmdate: '',
      start: '', // 开始日期
      end: '', // 结束日期
    };
  },
  created() {
    // 状态统计
    this.handleFilter()
    //提前一周
    var dateweek = new Date();
    // var dateweeks = dateweek.getFullYear() + '-' + (dateweek.getMonth() + 1) + '-' + (dateweek.getDate()-7) +' '+ dateweek.getHours() + ':' + dateweek.getMinutes()+':' +dateweek.getSeconds();
    var dateweeks = new Date(new Date().getTime()-(6*24*60*60*1000))
    //当前时间
    var date = new Date();
    var dates = new Date();
    // var dates = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate()) +' '+ date.getHours() + ':' + date.getMinutes()+':' +date.getSeconds();
    this.alarmdate = [
    dateweeks,
    dates,
    ];
    console.log("时间戳")
    console.log(this.alarmdate)
    this.start = moment(dateweeks).format("YYYY-MM-DDHH:mm:ss");
    this.end = moment(date).format("YYYY-MM-DDHH:mm:ss");
    // this.start = dateweek.getFullYear().toString() + (dateweek.getMonth() + 1).toString()  + (dateweek.getDate()-7).toString()
    // this.end = date.getFullYear().toString()  + (date.getMonth() + 1).toString()   + (date.getDate()).toString()
  },
  methods: {
  dateFormat(date){ //date为中国标准时间:例 new Date()结果的格式
  var year = date.getFullYear().toString();
  var month = date.getMonth() + 1;
  if(month<10) {
    month = "0" + month.toString();
  } else {
   month = month.toString();
  }
  var day = date.getDate();
  if(day <10) {
    day = "0" + day.toString();
  } else {
   day = day.toString();
  }
  return year + '-' + month+ '-' + day; //返回格式为20190615
},
    formatDate: function (date) {
        var ym;
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        if (m < 10) {
          m = "0" + m;
        }
        if (d < 10) {
          d = "0" + d;
        }
        ym = y + m + d;
        return ym;
    },
    handleClick(tab) {
      if (tab.index == 1) {
        // 使用
        this.handleFilterBar(3)
      } else if (tab.index == 2) {
        // 预约
        this.handleFilterBar(1)
      } else if (tab.index == 3) {
        // 取消
        this.handleFilterBar(2)
      } else {
        // 状态统计
        this.handleFilter()
      }
    },
    // 状态统计 饼状图
    handleFilter() {
      getState()
        .then((response) => {
          this.dataList = response.data.data.list;
          if (this.dataList) {
            console.log('this.dataList',this.dataList);
            const datas = [
              { name:'房间数',value: this.dataList[0].roomNum},
              { name:'即将开始',value: this.dataList[0].upcomingCount},
              { name:'会议中',value: this.dataList[0].underwayCount },
              { name:'空闲数',value: this.dataList[0].leisureCount}
            ]
            this.showChartPie(datas);
          }
        })
        .catch(() => {
          this.dataList = [];
        });
    },
    showChartPie(datas) {
      const legend = datas.map(function (item) {
        return item.name;
      });

      // 基于准备好的dom，初始化echarts实例
      const state = this.$echarts.init(document.getElementById("state"));
      // 绘制图表
      state.setOption({
        legend: {
          orient: "vertical",
          right: 10,
          top: 20,
          bottom: 20,
          data: legend,
          textStyle: {
            //图例文字的样式
            fontSize: 18,
            fontWeight: 'bold'
          },
        },
        color: ['#03a9f4','#fcbe36','#f66a6e','#36cc79'],
        tooltip: {
          trigger: 'item'
        },
        series: {
          name: "图表",
          type: "pie",
          data: datas,
          label: {
            normal: {
              show: true,
              formatter: "{d} %",
              fontSize: 22,
            },
          },
        },
      });
    },
    // 柱状图
    handleFilterBar(e) {
      getStateBar({
        start: this.start,
        end: this.end,
        status: e
      })
        .then((response) => {
          this.dataList = response.data.data.list;
          if (this.dataList) {
            const barDatas = [];
            const faqi1 = [];
            const datas = []
            this.dataList.map(function (item) {
              faqi1.push(item.number);
              datas.push(item.roomName);
            });
            barDatas.push({
              type: "bar",
              data: faqi1,
              backgroundStyle: {
                color: "#4472C5",
              },
            //   label: {
            //     show: true,
            //     position: 'inside'
            // },
            });
            // 取消
            if(e == 2){
              this.showChartBar(datas, barDatas);
            }else if(e == 1){
              // 预约
              this.showChartBarYuyue(datas, barDatas);
            }else{
              // 使用
              this.showChartBarUse(datas, barDatas);
            }
          }
        })
        .catch(() => {
          this.dataList = [];
        });
    },

    showChartBar(datas, barDatas) {
      // 基于准备好的dom，初始化echarts实例
      const total = this.$echarts.init(
        document.getElementById("total")
      );
      // 绘制图表
      total.setOption({
        color: ["#6d88f4"],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: "category",
          data: datas,
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16,   //更改坐标轴文字大小
            }
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16,   //更改坐标轴文字大小
            }
          },
        },
        series: barDatas,
      });
    },

    showChartBarYuyue(datas, barDatas) {
      // 基于准备好的dom，初始化echarts实例
      const total = this.$echarts.init(
        document.getElementById("totalYuyue")
      );
      // 绘制图表
      total.setOption({
        color: ["#6d88f4"],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: "category",
          data: datas,
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16,   //更改坐标轴文字大小
            }
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16,   //更改坐标轴文字大小
            }
          },
        },
        series: barDatas,
      });
    },

    showChartBarUse(datas, barDatas) {
      // 基于准备好的dom，初始化echarts实例
      const total = this.$echarts.init(
        document.getElementById("totalUse")
      );
      // 绘制图表
      total.setOption({
        color: ["#6d88f4"],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: "category",
          data: datas,
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16,   //更改坐标轴文字大小
            }
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16,   //更改坐标轴文字大小
            }
          },
        },
        series: barDatas,
      });
    },

  },
};
</script>
